<template>
  <!-- 注: 本示例仅演示mescroll-body写在一层子组件的情况, 其实同样适用mescroll-body写在子子..子组件的情况, 只需每一层都要写上第一步和第二步的代码即可 -->
  <view class="home">
    <!-- 头部 start -->
    <!-- <uni-nav-bar
      v-if="userInfo"
      fixed="true"
      statusBar="true"
      backgroundUrl="url('https://hccm-1256080859.cos.ap-beijing.myqcloud.com/image/20221108/1667880784609.png') no-repeat"
      :border="false"
      @clickLeft="clickLeft"
    >
      <view
        class="input-view"
      >
      </view>
    </uni-nav-bar> -->
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      leftBtnShow="false"
      backgroundUrl="url('https://hccm-1256080859.cos.ap-beijing.myqcloud.com/image/20221108/1667880784609.png') no-repeat"
      :border="false"
      color="#fff"
      @clickLeft="clickLeft"
    >
      <view class="uni-title">{{ userInfo ? "" : "辽宁易复诊" }}</view>
    </uni-nav-bar>
    <view v-if="userInfo">
      <!-- 头部 end -->
      <movable></movable>
      <!-- <movable hospId="H21010200543"></movable> -->
      <!-- 背景图 -->
      <image class="bgFixed" src="@/static/image/homeBg_2.png" />
      <!-- 内容 start -->
      <view class="info flex">
        <view class="infoImg flex">
          <view
            class="icon iconfont icon-shouye"
            style="font-size: 110rpx; color: #3388ff; padding-top: 10rpx"
          ></view>
        </view>
        <view class="infoDes">
          <view>{{ starIDCard(userInfo.certificateId) }}</view>
          <view class="inner flex" v-if="userInfo">
            <view class="innerDes">{{ starPhone(userInfo.phoneNo) }}</view>
            <view class="innerDes">{{ getSex(userInfo.patientSex) }}</view>
            <view class="innerDes">{{ getAge(userInfo.birthday) }}岁</view>
          </view>
        </view>
      </view>
      <view class="btn-box">
        <view
          :class="[activeTab == 'normal' ? 'active' : '', 'tab-inner']"
          @click="tabClick('normal')"
          >普通处方</view
        >
        <view
          :class="[activeTab == 'injection' ? 'active' : '', 'tab-inner']"
          @click="tabClick('injection')"
          >针剂处方</view
        >
      </view>
      <view>
        <mescroll-item
          v-if="activeTab == 'normal'"
          ref="mescrollItem"
        ></mescroll-item>
        <injection-item
          v-if="activeTab == 'injection'"
          ref="mescrollItem"
        ></injection-item>
      </view>
    </view>
    <view v-else>
      <button
        open-type="getPhoneNumber"
        class="login_button"
        @getphonenumber="login"
        v-show="!logged"
      >
        同意授权
      </button>
      <home-page></home-page>
    </view>
  </view>
</template>

<script>
import MescrollItem from "./mescroll-comp-item.vue"; // 一个mescroll-body写在子组件的情况
import injectionItem from "../injection/mescroll-comp-item.vue"; // 一个mescroll-body写在子组件的情况
import hccmStore from "@/common/hccm-store.js";
import movable from "@/pages/components/movable/movable.vue";
// 第二步: 引入mescroll-comp.js
import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
import moment from "@/static/js/moment";
import dict from "@/static/js/dict.json";
import homePage from "@/pages/components/home-page/home-page.vue";
import hccmConfig from "@/common/hccm-config.js";
import mRequest from "@/api/home";

export default {
  mixins: [MescrollCompMixin],
  components: {
    MescrollItem,
    injectionItem,
    movable,
    homePage,
  },
  onLoad() {},
  data() {
    return {
      userInfo: hccmStore.getUser(),
      activeTab: "injection",
      logged: false,
    };
  },
  methods: {
    tabClick(index) {
      this.activeTab = index;
    },
    //登录按钮
    login(e) {
      let self = this;
      var detail = e.detail;
      console.log(hccmConfig.HCCM_HOST_URL, 222);
      if (detail.errMsg == "getPhoneNumber:ok") {
        console.log("用户同意授权");
        var code = detail.code;
        uni.request({
          url: `${hccmConfig.HCCM_HOST_URL}/wx/getPhoneNumber`, //调用接口
          method: "POST",
          header: {
            "content-type": "application/json",
          },
          data: {
            code: code, //请求体中封装code
          },
          success(e) {
            console.log(e);
            self.logged = true;
            var userId = e.data.phone_info.purePhoneNumber;
            // TODO 需要修改手机号
            // hccmStore.setUserPhone('18613856809')
            hccmStore.setUserPhone(userId);
            uni.setStorage({
              key: "userId",
              data: userId,
              success() {
                self.getToken(hccmStore.getUserPhone(userId));
              },
            });
          },
          fail(e) {
            uni.showModal({
              title: "错误!",
              content: "网络错误!",
              complete() {},
            });
          },
        });
      }
    },
    getPatient() {
      if (hccmStore.getUserPhone()) {
        let param = {
          phoneNo: hccmStore.getUserPhone(),
        };
        mRequest.getPatient(param).then((res) => {
          hccmStore.setUser(res.responseData);
          uni.hideLoading();
          this.userInfo = hccmStore.getUser();
        });
      }
    },
    getToken(phone) {
      let param = {
        phone: phone,
      };
      mRequest.getToken(param).then(
        (res) => {
          hccmStore.setPhoneToken(res.responseData);
          uni.login({
            success: (res) => {
              this.getOpenId(res.code);
            },
          });
        },
        (error) => {}
      );
    },
    // 获取openId
    getOpenId(code) {
      let param = {
        code: code,
      };
      mRequest.getOpenId(param).then(
        (res) => {
          hccmStore.setWxOpenId(res.responseData);
          this.getPatient();
        },
        (error) => {}
      );
    },
    // 返回
    clickLeft() {
      uni.navigateBack();
    },
    // 手机号
    starPhone(val) {
      return val.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2"); // 手机号
    },
    // 身份证号
    starIDCard(val) {
      return val.replace(/^(.{6})(?:\d+)(.{4})$/, "$1********$2"); // 身份证号
    },
    getSex(val) {
      return dict.sexList.filter((item) => {
        return val == item.value;
      })[0].label;
    },
    getAge(birthday) {
      return (
        moment(new Date()).format("YYYY") - moment(birthday).format("YYYY")
      );
    },
  },
};
</script>

<style lang="scss">
@import "@/static/css/index.scss";

// begin
.home {
  height: 100%;
  overflow: hidden;

  .bgFixed {
    position: fixed;
    top: 144rpx;
    height: 250rpx;
    // height: 280rpx;
    width: 100%;
    z-index: -10;
  }

  .info {
    padding: 0 30rpx;
    height: 160rpx;
    justify-content: flex-start;
    align-self: start;
    box-sizing: border-box;
    position: fixed;
    top: 138rpx;
    width: 100%;
    z-index: 1000;
    background: url("https://hccm-1256080859.cos.ap-beijing.myqcloud.com/image/20221116/1668583538699.png")
      no-repeat;
    background-size: cover;

    .infoImg {
      height: 120rpx;
      width: 120rpx;
      border-radius: 120rpx;
      overflow: hidden;
      padding: 4rpx;
      background: #fff;
      box-shadow: 2px 2px 10px #06c;
      margin-right: 20rpx;
    }

    .infoDes {
      color: #fff;
      font-size: 40rpx;

      .inner {
        padding-top: 20rpx;
        font-size: 32rpx;
        justify-content: flex-start;
        align-self: start;

        .innerDes {
          padding-right: 16rpx;
        }
      }
    }
  }

  .drag-box {
    flex: 1;
    width: 100%;
  }

  .dragList {
    width: 100%;
    padding: 0 30rpx 0;
    flex: 1;
    overflow: auto;
    box-sizing: border-box;

    .list {
      padding: 24rpx 24rpx 20rpx 24rpx;
      width: 100%;
      margin-bottom: 40rpx;
      background: #fff;
      border-radius: 10rpx;
      box-sizing: border-box;
      box-shadow: 2px 2px 10px rgba($color: #000000, $alpha: 0.2);
      position: relative;

      .status {
        position: absolute;
        right: 0rpx;
        top: 26rpx;
        font-size: 26rpx;
        color: #fff;
        padding: 10rpx 20rpx 10rpx 36rpx;
        border-radius: 30rpx 0 0 30rpx;
      }

      .status1 {
        background: #ed5e5e;
      }

      .status3 {
        background: #67c23a;
      }

      .listInfo {
        justify-content: start;
        padding: 18rpx;
        color: #333333;
        font-weight: 500;
        font-size: 28rpx;

        .name {
          font-size: 28rpx;
          width: 140rpx;
          font-weight: 400;
          color: #777777;
        }
      }
    }
  }

  .title {
    font-size: 36rpx;
    color: #000000;
    font-weight: 600;
    padding: 20rpx 0;
    position: relative;

    .u-icon {
      position: absolute;
      right: 40rpx;
      top: 36rpx;
    }
  }

  .drugsInfo {
    background: #f1f8fe;
    padding: 24rpx;
    border-radius: 10rpx;
    width: 100%;
    box-sizing: border-box;
    font-size: 28rpx;
    font-weight: 400;
    margin-bottom: 20rpx;
  }
}

.flex-style {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.flex-item {
  height: 35px;
  line-height: 35px;
  text-align: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.flex-item.active {
  color: #0091ff;
}

.btn-box {
  position: fixed;
  top: 296rpx;
  left: 0;
  background: #f5f7fa;
  z-index: 10000;
  width: 90%;
  height: 100rpx;
  padding: 0 5%;
  display: flex;
  box-sizing: content-box;

  .tab-inner {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50rpx;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    font-size: 30rpx;
    font-weight: 600;
    color: #dfe0e2;
    background-image: linear-gradient(to right, #428ee4, #57b5d9);
  }

  .tab-inner:first-of-type {
    border-radius: 50rpx;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    position: relative;
    background-image: linear-gradient(to right, #3d86e6, #428ee4);
  }

  .tab-inner:first-of-type:after {
    content: "";
    position: absolute;
    top: 20%;
    right: 0;
    height: 60%;
    width: 2rpx;
    border-radius: 2rpx;
    background: #f5f7fa;
  }

  .active {
    color: #fff;
  }
}

.login_button {
  position: fixed;
  bottom: 0;
  height: 120rpx;
  line-height: 120rpx;
  padding-bottom: 4rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000;
}
</style>
